<template>
	<view class="search_box">
		<view class="panel_tit">基础用法</view>
		<ker-search  @confirm = "confirm" @inputUpdate="inputUpdate"></ker-search>
		<view class="" style="margin-bottom: 40rpx; color: #2F9BFE;">
			输入的值为：{{val}}
		</view>
		<!-- 圆角输入框 -->
		<view class="panel_tit">radius: 圆角输入框</view>
		<ker-search radius='20' @openHandle='openSearch'></ker-search>
		<!--maxlength 输入最大长度 -->
		<view class="panel_tit">maxlength:输入最大长度为5个字符</view>
		<ker-search radius='20' :maxlength='5' @openHandle='openSearch' ></ker-search>
		
	<!-- placeholder 搜索栏Placeholder -->
	<view class="panel_tit">placeholder</view>
	<ker-search placeholder="测试一下" @openHandle='openSearch' ></ker-search>
	<!-- clearButton 是否显示清除按钮 -->
	<view class="panel_tit">clearButton: 显示清除按钮</view>
	<ker-search  clearButton="always" @openHandle='openSearch' ></ker-search>
	
	<!-- searchButton 是否显示取消按钮-->
	<view class="panel_tit">searchButton: 不显示取消按钮</view>
	<ker-search searchButton="none" @openHandle='openSearch' ></ker-search>
	
	<!-- seachText 取消按钮的文字-->
	<view class="panel_tit">seachText: 取消按钮的文字</view>
	<ker-search seachText="关闭" @openHandle='openSearch' ></ker-search>
		
		
	<!-- bgColor 输入框背景颜色 -->
	<view class="panel_tit">bgColor: 输入框背景颜色</view>
	<ker-search bgColor="rgba(60,64,170,0.4)" @openHandle='openSearch' ></ker-search>
	</view>
</template>

<script>
	import kerSearch from '@/components/ker-search/ker-search'
	export default {
		components:{ kerSearch },
		data() {
			return {
				val: ''
			};
		},
		methods:{
			openSearch(e) {
				console.log(e)
			},
			inputUpdate(val){
				this.val = val;
				uni.showLoading({
					title:'请稍等'
				})
				setTimeout(()=>{
					uni.hideLoading()
					uni.showToast({
						title:'请求成功！',
						icon:'success'
					})
				},2000)
			},
			confirm(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search_box{
		padding: 30rpx 20rpx;
		box-sizing: border-box;
	}
.panel_tit{
	margin-top: 20rpx;
}
</style>
